<template>
<div>
<van-row style="margin:  20px 0;">
  <van-col span="8"></van-col>
  <van-col span="8" style="text-align:center">分类查询</van-col>
  <van-col span="8"></van-col>
</van-row>
    <div class="gap"></div>
  <h3 style="">旅游度假</h3>
    <van-grid :column-num="4">
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
  </van-grid>
      <div class="gap"></div>
  <h3 style="">交通住宿 </h3>
    <van-grid :column-num="4" style="padding-bottom:40px">
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
  </van-grid>
<tabbar/>
</div>
  
</template>

<script>
import Vue from 'vue';
import { Col, Row } from 'vant';
import { Grid, GridItem } from 'vant';
import tabbar from "@/components/Tabbar.vue";


Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Col);
Vue.use(Row);
export default {
    components: {
     tabbar
  },

}
</script>

<style scoped>
h3{
    text-align: left;
    margin-left: 10px;
}
.gap{height: 10px;width: 100%;background: rgb(0,0,0,0.1);}

</style>